<template>
  <el-form
    style="margin-left: 30px;width: 460px;"
    label-width="100px"
    :model="form"
    ref="rulesForm"
  >
    <el-form-item
      :label="isEdit ? '证件名称' : '证件名称:'"
      prop="certificateName"
      :rules="vd ? getRules('input', '证件名称'): getRules('no-required')"
    >
      <el-input
        v-if="isEdit"
        v-model.trim="form.certificateName"
        placeholder="证件名称"
        maxlength="50"
        clearable
      ></el-input>
      <span v-else>{{form.certificateName}}</span>
    </el-form-item>
    <el-form-item
      :label="isEdit ? '证件编号' : '证件编号:'"
      prop="certificateNo"
      :rules="vd ? getRules('input', '证件编号') : getRules('no-required')"
    >
      <el-input
        v-if="isEdit"
        v-model.trim="form.certificateNo"
        placeholder="证件编号"
        clearable
        maxlength="50"
      ></el-input>
      <span v-else>{{form.certificateNo}}</span>
    </el-form-item>
    <el-form-item
      :label="isEdit? '有效期至' : '有效期至:'"
      :prop="form.longValid ? 'longValid' : 'validityDateEnd'"
      :rules="vd ? getRules('required', '有效期至', {trigger: 'change'}) : getRules('no-required')"
    >
      <div v-if="isEdit">
        <el-radio-group v-model="form.longValid">
          <el-radio :label="1">长期有效</el-radio>
          <el-radio :label="0">固定日期</el-radio>
        </el-radio-group>
        <el-date-picker
          v-if="!form.longValid"
          v-model="form.validityDateEnd"
          style="width: 100%"
          type="date"
          placeholder="证件有效期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <span v-else>{{ !subForm.longValid ? subForm.validityDateEnd : '长期有效'}}</span>
    </el-form-item>
  </el-form>
</template>

<script>
import getRules from "@/validUtils";
let ol = {
  fileUrl: "",
  certificateName: "",
  certificateNo: "",
  longValid: 0,
  validityDateEnd: "",
};
export default {
  name: "qf-general",
  props: {
    add: {
      type: Boolean,
      default: true,
    },
    showEdit: {
      type: Boolean,
      default: true,
    },
    subForm: {
      type: Object,
      default: () => {},
    },
    vf: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    vd() {
      if (this.showEdit && this.vf) {
        return true;
      } else {
        return false;
      }
    },
  },
  watch: {
    showEdit: {
      handler(val) {
        this.isEdit = val;
        if (!this.isEdit) {
          this.$nextTick(() => {
            this.$refs.rulesForm.clearValidate();
          });
        }
      },
      immediate: true,
    },
    subForm: {
      handler(val) {
        if (JSON.stringify(val) != "{}") {
          this.form = Object.structure({}, this.form, val);
          if (val.uuid) {
            this.form.uuid = val.uuid;
          }
        } else {
          this.form = { ...ol };
        }
      },
      immediate: true,
    },
    form: {
      handler(val) {
        this.$emit("changeForm", val);
      },
      deep: true,
    },
  },
  data() {
    return {
      isEdit: true,
      getRules: getRules,
      form: { ...ol },
    };
  },
  created() {},
  methods: {
    submit() {
      return new Promise((resolve, reject) => {
        if (!this.isCheckForm() && !this.form.uuid) {
          this.form._uuid = new Date().getTime();
        }
        if (this.vd) {
          this.$refs.rulesForm.validate((valid) => {
            if (valid) {
              resolve(this.form);
            } else {
              console.log("error submit!!");
              reject({ code: 110, data: this.form, msg: "验证失败请检测代码" });
              return false;
            }
          });
        } else {
          resolve(this.form);
        }
      });
    },
    // 判断提交的表单是否整个属性为空值 bb:true代表属性无值的状态，bb:false代表属性有值的状态
    isCheckForm() {
      let bb = true;
      for (let key in this.form) {
        let b = this.form[key] === 0 || this.form[key];
        if (b) {
          bb = false;
          break;
        }
      }
      return bb;
    },
  },
};
</script>

<style lang="less" scoped>
.qf-image__lazy {
  width: 178px;
}
.qf-info-container {
  position: relative;
  display: flex;
  justify-content: flex-start;
}
</style>
